<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="450"></canvas>

    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // --- Style and Configuration ---
        ctx.strokeStyle = '#000';
        ctx.fillStyle = '#000';
        ctx.lineWidth = 2;
        ctx.font = 'bold 18px sans-serif';
        ctx.textAlign = 'center';

        // --- Geometry Parameters ---
        // These parameters are chosen to visually match the diagram, they are not to scale.
        const centerX = 250;
        const centerY = 500; // Center of the Earth (off-canvas to match the diagram)
        const radius = 350; // Visual radius of the Earth's arc
        const chordLength = 300; // Visual length of the tunnel line

        // --- Calculated Coordinates ---
        const halfChord = chordLength / 2;
        // Vertical distance from center to the chord
        const h = Math.sqrt(radius * radius - halfChord * halfChord);
        
        // Y-coordinate of the chord and the endpoints on the arc
        const yChord = centerY - h;
        // X-coordinates of the endpoints
        const xLeft = centerX - halfChord;
        const xRight = centerX + halfChord;
        
        // Y-coordinate of the highest point of the arc
        const yTop = centerY - radius;
        
        // Angles for drawing the arc
        const startAngle = Math.atan2(yChord - centerY, xLeft - centerX);
        const endAngle = Math.atan2(yChord - centerY, xRight - centerX);

        // --- Drawing Functions ---

        function drawEarthArc() {
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, startAngle, endAngle);
            ctx.stroke();
        }

        function drawTunnelAndDimensions() {
            // Dimension line
            ctx.beginPath();
            ctx.moveTo(xLeft, yChord + 10);
            ctx.lineTo(xRight, yChord + 10);
            ctx.stroke();

            // T-marks
            ctx.beginPath();
            ctx.moveTo(xLeft, yChord + 5);
            ctx.lineTo(xLeft, yChord + 15);
            ctx.stroke();

            ctx.beginPath();
            ctx.moveTo(xRight, yChord + 5);
            ctx.lineTo(xRight, yChord + 15);
            ctx.stroke();

            // Label
            ctx.fillText('300 km', centerX, yChord + 30);
        }

        function drawHelperLinesAndLabels() {
            ctx.save();
            ctx.setLineDash([6, 6]);
            ctx.lineWidth = 1.5;

            // Vertical dashed line from center to top of arc
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.lineTo(centerX, yTop);
            ctx.stroke();

            // Dashed radius line to the right endpoint
            ctx.beginPath();
            ctx.moveTo(centerX, centerY);
            ctx.lineTo(xRight, yChord);
            ctx.stroke();

            ctx.restore();
            
            // Radius Label
            ctx.save();
            ctx.translate(centerX + 110, centerY - 140);
            ctx.rotate(Math.atan2(yChord - centerY, xRight - centerX) + Math.PI/2);
            ctx.textAlign = 'left';
            ctx.fillText('R = 6400 km', 0, 0);
            ctx.restore();
        }
        
        function drawObjects() {
            // Middle object (train)
            ctx.save();
            ctx.translate(centerX, yTop);
            // Body
            ctx.beginPath();
            ctx.rect(-18, -4, 36, 6);
            ctx.stroke();
            // Propeller
            ctx.beginPath();
            ctx.moveTo(0, -4);
            ctx.lineTo(0, -10);
            ctx.moveTo(0, 2);
            ctx.lineTo(0, 8);
            ctx.stroke();
            ctx.beginPath();
            ctx.arc(0, -1, 3, 0, 2*Math.PI);
            ctx.fill();
            ctx.restore();

            // Function to draw side objects (cities)
            function drawSideObject(x, y, flip) {
                const angle = Math.atan2(x - centerX, -(y - centerY));
                ctx.save();
                ctx.translate(x, y);
                ctx.rotate(angle);
                const scale = flip ? -1 : 1;

                // Body
                ctx.beginPath();
                ctx.moveTo(scale * -12, -4);
                ctx.lineTo(scale * 8, -4);
                ctx.lineTo(scale * 15, 0); // Nose
                ctx.lineTo(scale * 8, 4);
                ctx.lineTo(scale * -12, 4);
                ctx.closePath();
                ctx.stroke();
                
                // Tail
                ctx.beginPath();
                ctx.moveTo(scale * -12, 0);
                ctx.lineTo(scale * -20, -8);
                ctx.stroke();

                ctx.restore();
            }

            // Left and Right objects
            drawSideObject(xLeft, yChord, true); // Flipped
            drawSideObject(xRight, yChord, false); // Not flipped
        }
        
        function drawFigureLabel() {
            ctx.fillText('Fig. 1.19.', centerX, 420);
        }

        // --- Main Drawing Execution ---
        drawEarthArc();
        drawTunnelAndDimensions();
        drawHelperLinesAndLabels();
        drawObjects();
        drawFigureLabel();

    </script>
</body>
</html>